<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <head>
      {{ cssStyle }}

  </head>

  <body id="index" class="home">
    <header id="banner" class="body"> 
    <h1>McCanada</h1>
    <h2>I'm enjoyin' it</h2>

    <nav> 
    <ul> 
      <li><a href="/">Home</a></li> 
    </ul> 
    </nav> 
    </header> 
    <form id="backButton" action="/health" method="post">
    </form>

    <section id="content" class="body">	
    <form method="post" action="/order">
      <table>
        {% for mi in menu_items %}
        <tr>
          <td>{{ mi.name }}</td>
          <td><input type="checkbox" name="{{ mi.key }}" value="1"></td>
        </tr>
        {% endfor %}
      </table>

      <input type="button" value="Back" onclick="document.getElementById('backButton').submit();">
      <input type="submit" value="Next">
    </form>
    </section>

    <footer id="contentinfo" class="body">
    McCanada 311
    </footer>


  </body>
</html>
